<script>
import outMain from "@/components/outMain.vue";
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";

export default {
  components: { outMain },
  name: "HomeCenter",
  setup () {
    const statisticsData = reactive({
      totalUsers: {
        value: 6842,
        increase: 12.6,
        icon: "icon-yonghuguanli",
        bgColor: "linear-gradient(135deg, #4b58dc, #7b86ff)",
      },
      dailyVisits: {
        value: 2485,
        increase: 5.3,
        icon: "icon-fangwenliang",
        bgColor: "linear-gradient(135deg, #6759FF, #9D8DF1)",
      },
      totalSales: {
        value: 29654,
        increase: 8.9,
        icon: "icon-jiaoyijine",
        bgColor: "linear-gradient(135deg, #FF6F91, #FF9671)",
      },
      taskCompletion: {
        value: 78,
        increase: 3.2,
        icon: "icon-renwuwancheng",
        bgColor: "linear-gradient(135deg, #4FACFE, #00F2FE)",
      },
    });

    const chartRefs = {
      userTrendChart: ref(null),
      salesDistributionChart: ref(null),
      performanceChart: ref(null),
    };

    // 模拟数据
    const chartData = {
      userTrend: {
        dates: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        values: [120, 132, 101, 134, 90, 230, 210],
        growth: [20, 40, 65, 40, 80, 45, 90],
      },
      salesDistribution: [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "邮件营销" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" },
      ],
      performance: {
        categories: ["研发", "市场", "用户增长", "客户服务", "产品", "销售"],
        values: [81, 70, 78, 60, 85, 74],
      },
    };

    onMounted(() => {
      initUserTrendChart();
      initSalesDistributionChart();
      initPerformanceChart();

      window.addEventListener("resize", () => {
        chartRefs.userTrendChart.value &&
          chartRefs.userTrendChart.value.resize();
        chartRefs.salesDistributionChart.value &&
          chartRefs.salesDistributionChart.value.resize();
        chartRefs.performanceChart.value &&
          chartRefs.performanceChart.value.resize();
      });
    });

    const initUserTrendChart = () => {
      const chartDom = document.getElementById("userTrendChart");
      chartRefs.userTrendChart.value = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: chartData.userTrend.dates,
          axisLine: {
            lineStyle: {
              color: "#8392A5",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(131, 146, 165, 0.1)",
            },
          },
        },
        series: [
          {
            name: "用户数",
            type: "bar",
            data: chartData.userTrend.values,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4b58dc" },
                { offset: 1, color: "#7b86ff" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#6759FF" },
                  { offset: 1, color: "#9D8DF1" },
                ]),
              },
            },
          },
          {
            name: "增长率",
            type: "line",
            smooth: true,
            data: chartData.userTrend.growth,
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#FF6F91",
            },
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#FF6F91" },
                { offset: 1, color: "#FF9671" },
              ]),
            },
          },
        ],
      };

      chartRefs.userTrendChart.value.setOption(option);
    };

    const initSalesDistributionChart = () => {
      const chartDom = document.getElementById("salesDistributionChart");
      chartRefs.salesDistributionChart.value = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: "center",
          textStyle: {
            color: "#8392A5",
          },
        },
        series: [
          {
            name: "销售来源",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["40%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: chartData.salesDistribution,
            color: ["#4b58dc", "#6759FF", "#FF6F91", "#4FACFE", "#00F2FE"],
          },
        ],
      };

      chartRefs.salesDistributionChart.value.setOption(option);
    };

    const initPerformanceChart = () => {
      const chartDom = document.getElementById("performanceChart");
      chartRefs.performanceChart.value = echarts.init(chartDom);

      const option = {
        radar: {
          indicator: chartData.performance.categories.map((category) => ({
            name: category,
            max: 100,
          })),
          splitNumber: 4,
          axisName: {
            color: "#8392A5",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(131, 146, 165, 0.2)",
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(255, 255, 255, 0.03)", "rgba(255, 255, 255, 0.05)"],
            },
          },
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: chartData.performance.values,
                name: "部门绩效",
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    { offset: 0, color: "rgba(75, 88, 220, 0.8)" },
                    { offset: 1, color: "rgba(75, 88, 220, 0.1)" },
                  ]),
                },
                lineStyle: {
                  width: 2,
                  color: "#4b58dc",
                },
                itemStyle: {
                  color: "#4b58dc",
                },
              },
            ],
          },
        ],
      };

      chartRefs.performanceChart.value.setOption(option);
    };

    return {
      statisticsData,
      chartRefs,
    };
  },
};
</script>

<template>
  <outMain>
    <div class="dashboard-container">
      <!-- 统计卡片区域 -->
      <div class="statistics-cards">
        <div
          v-for="(item, key) in statisticsData"
          :key="key"
          class="stat-card"
          :style="{ background: item.bgColor }"
        >
          <div class="card-content">
            <div class="card-left">
              <div class="card-title">
                {{
                  key === "totalUsers"
                    ? "总用户数"
                    : key === "dailyVisits"
                    ? "日访问量"
                    : key === "totalSales"
                    ? "总销售额"
                    : "任务完成率"
                }}
              </div>
              <div class="card-value">
                {{
                  key === "taskCompletion"
                    ? item.value + "%"
                    : item.value.toLocaleString()
                }}
              </div>
              <div class="card-increase">
                <span class="iconfont icon-shangsheng"></span>
                <span>{{ item.increase }}%</span>
              </div>
            </div>
            <div class="card-icon">
              <div class="icon-bg">
                <span class="iconfont" :class="item.icon"></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="chart-container">
        <!-- 用户趋势图表 -->
        <div class="chart-card">
          <div class="chart-header">
            <div class="chart-title">用户增长趋势</div>
            <div class="chart-subtitle">近7个月用户增长情况</div>
          </div>
          <div class="chart-body">
            <div id="userTrendChart" class="chart"></div>
          </div>
        </div>

        <div class="chart-row">
          <!-- 销售分布图表 -->
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title">销售来源分布</div>
              <div class="chart-subtitle">各渠道销售占比</div>
            </div>
            <div class="chart-body">
              <div id="salesDistributionChart" class="chart"></div>
            </div>
          </div>

          <!-- 绩效雷达图表 -->
          <div class="chart-card">
            <div class="chart-header">
              <div class="chart-title">部门绩效</div>
              <div class="chart-subtitle">各部门工作评估</div>
            </div>
            <div class="chart-body">
              <div id="performanceChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>

<style scoped lang="less">
.dashboard-container {
  padding: 20px;

  .statistics-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;

    .stat-card {
      flex: 1;
      min-width: 230px;
      height: 140px;
      border-radius: 16px;
      color: white;
      padding: 20px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.15),
          rgba(255, 255, 255, 0)
        );
        z-index: 1;
      }

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      }

      .card-content {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        height: 100%;
      }

      .card-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .card-title {
        font-size: 16px;
        opacity: 0.9;
        margin-bottom: 10px;
      }

      .card-value {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .card-increase {
        font-size: 14px;
        display: flex;
        align-items: center;

        .iconfont {
          margin-right: 5px;
        }
      }

      .card-icon {
        display: flex;
        align-items: center;

        .icon-bg {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(5px);

          .iconfont {
            font-size: 28px;
          }
        }
      }
    }
  }

  .chart-container {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .chart-row {
      display: flex;
      gap: 20px;

      @media (max-width: 1200px) {
        flex-direction: column;
      }
    }

    .chart-card {
      background: white;
      border-radius: 16px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      padding: 20px;
      flex: 1;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #4b58dc, #7b86ff);
      }

      &:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transform: translateY(-3px);
      }

      .chart-header {
        margin-bottom: 20px;
      }

      .chart-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
      }

      .chart-subtitle {
        font-size: 13px;
        color: #8392a5;
      }

      .chart-body {
        width: 100%;

        .chart {
          width: 100%;
          height: 300px;
        }
      }
    }
  }
}

// 动画效果
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(75, 88, 220, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(75, 88, 220, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(75, 88, 220, 0);
  }
}

// 添加卡片动画
.stat-card {
  animation: pulse 2s infinite;
  animation-delay: calc(var(--i) * 0.5s);
}

.stat-card:nth-child(1) {
  --i: 0;
}
.stat-card:nth-child(2) {
  --i: 1;
}
.stat-card:nth-child(3) {
  --i: 2;
}
.stat-card:nth-child(4) {
  --i: 3;
}
</style>
